<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type">
    <title>Tags</title>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
</head>
<body>
<main class="ui container" id="tags">
    <div class="ui form">
        新增标签
        <div class="field">
            标签名<input type="text" name="name" required v-model="tagname">
            <div class="ui button" @click="add_tag()">Submit</div>
        </div>
    </div>
    <div class="ui segment">
        <div class="ui celled  list">
            <div class="item" v-for="t in tags">
                <div class="ui left floated header" v-html="t.name"></div>
            </div>
        </div>
    </div>
</main>
<script>
    var tags = new Vue({
            el: "#tags",
            data: {
                tags: [],
                tagname: ""
            },
            methods: {
                get_tags() {
                    let that = this;
                    axios.get("/api/admin/tag")
                        .then(function (res) {
                            if (res.data.code == 200) {
                                that.tags = res.data.data;
                            }
                        });
                },
                add_tag() {
                    let that = this;
                    axios.post("/api/admin/tag/add/", {
                        tagname: this.tagname
                    })
                        .then(function (res) {
                            if (res.data.code != 200) {
                                alert(res.data.message);
                            } else {
                                that.get_tags();
                            }
                        });
                }
            },
            created() {
                this.get_tags();
            }
        })
    ;
</script>
</body>
</html>